<template>
  <div id="app">
    <div id="head">
      编号：<input class="bian" type="text" v-model="code" /> 品牌名称：<input
        class="pin"
        type="text"
        v-model="productName"
      />
      <button class="btn" @click="add">添加</button>
    </div>
    <div id="search">
      品牌名称：<input
        class="sou"
        type="text"
        placeholder="请输入搜索条件"
        v-model="searchText"
      />
    </div>
    <div id="body">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创立时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr v-for="item in searchArr" :key="item.id">
            <td>{{ item.code }}</td>
            <td>{{ item.productName }}</td>
            <td>{{ item.timer }}</td>
            <td><button @click="del(item)">删除</button></td>
          </tr>
        </tbody>
      </table>
      <div
        class="last"
        style="text-align: center"
        v-show="searchArr.length === 0"
      >
        已经没有更多数据了
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      code: "",
      productName: "",
      searchText: "",
      arr: [
        {
          id: 1,
          code: 1,
          productName: "品如的衣柜",
          timer: new Date().toLocaleTimeString(),
        },
        {
          id: 2,
          code: 2,
          productName: "蔡徐坤的篮球",
          timer: new Date().toLocaleTimeString(),
        },
        {
          id: 3,
          code: 3,
          productName: "大碗面",
          timer: new Date().toLocaleTimeString(),
        },
      ],
    };
  },
  computed: {
    searchArr() {
      return this.arr.filter(
        (it) => it.productName.indexOf(this.searchText) !== -1
      );
    },
  },
  methods: {
    add() {
      if (this.code == "" || this.productName === "") {
        alert("code或者productName输入不能为空");
        return;
      }
      let obj = {
        id: Math.random().toString(32).substr(2),
        code: this.code,
        productName: this.productName,
        timer: new Date().toLocaleTimeString(),
      };
      this.arr.push(obj);
      this.code = "";
      this.productName = "";
    },
    del(i) {
      this.arr = this.arr.filter((v) => v.id !== i.id);
    },
  },
  mounted() {
    let qfArr = localStorage.getItem("qf-arr");
    console.log(qfArr);
    console.log(typeof qfArr);
    qfArr = qfArr == "undefined" ? "[]" : qfArr;
    this.arr = JSON.parse(qfArr);
  },
  watch: {
    arr(newVal, oldVal) {
      console.log(oldVal);
      localStorage.setItem("qf-arr", JSON.stringify(newVal));
    },
  },
};
</script>
<style scoped>
body,
html {
  margin: 0;
  padding: 0;
}

#app {
  width: 800px;
  margin: 20px auto;
}

#head {
  width: 800px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  border: 1px solid #000;
}

#head > input {
  width: 200px;
  height: 20px;
  margin-bottom: 3px;
}

#search {
  width: 800px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  border: 1px solid #000;
  margin: 10px 0;
}

#body {
  width: 800px;
  height: 50px;
}
#body > table {
  width: 800px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  line-height: 40px;
  background-color: #000;
  border: 1px solid #000;
  border-collapse: collapse；;
}
#body > table > thead {
  background-color: deepskyblue;
}
#body #tbody > tr > td {
  border-collapse: collapse;
  background-color: #fff;
  color: #000;
  font-weight: bolder;
}
</style>
